<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            height: 90vh;
            background: yellow;
            display: grid;
            padding: 20px;
            /* 三行两列 */
            grid-template-rows: repeat(2, 100px) 1fr;
            grid-template-columns: 150px 1fr;
            /* 跨越多个格子  子项放置 */
            grid-template-areas: "header header" "aside tab" "aside main";
        }

        .item {
            border-radius: 5px;
            text-align: center;
            line-height: 100px;
            background: orange;
            box-shadow: inset 2px 5px 10px rgba(0, 0, 0, .15);
            color: #fff;

        }

        /* 注意网格线  具有编号  正序1 2 3  倒序则 -1 -2 -3 */
        .header {
            /* 列跨 */
            /* grid-column-start: 1;
            grid-column-end: 3; */
            /* grid-column: 1/ 3; */
            /* 行跨 */
            /* grid-row-start: 1;
            grid-row-end: 2; */
            /* grid-row: 1 /2; */
            /* grid-area:1 / 1 /span 1/ span 2; */
            grid-area:header;
        }

        .aside {
            /* grid-area: 2 / 1 / span 2 / span 1; */
            grid-area:aside;
        }

        .tab {
            /* grid-area: 2/2; */
            grid-area:tab;
        }

        .main {
            /* grid-area: 3 / 2; */
            grid-area:main;
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- seo ？  重要的东西 提前书写 -->
        <div class="item main">main</div>
        <div class="item header">header</div>
        <div class="item aside">aside</div>
        <div class="item tab">tab</div>
    </div>

</body>

</html>